<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <!-- /导航栏 -->
    <input
      type="file"
      hidden
      ref="file"
      accept="image/*"
      @change="onFileChange"
    />

    <van-cell title="头像" is-link center @click="$refs.file.click()">
      <van-image class="photo" round fit="cover" :src="user.photo" />
    </van-cell>
    <van-cell
      @click="showUpdateName = true"
      title="昵称"
      is-link
      :value="user.name"
    ></van-cell>
    <van-cell
      @click="showUpdateGender = true"
      title="性别"
      is-link
      :value="user.gender ? '女' : '男'"
    ></van-cell>
    <van-cell
      @click="showUpdateBirthday = true"
      title="生日"
      is-link
      :value="user.birthday"
    ></van-cell>

    <!-- 修改头像的弹出层 -->
    <van-popup
      class="update-photo-popup"
      v-model="showUpdatePhoto"
      position="bottom"
    >
      <UpdatePhoto
        v-if="showUpdatePhoto"
        :file="file"
        @close="showUpdatePhoto = false"
        @update-success="updatePhotoSuccess"
      />
    </van-popup>
    <!-- /修改头像的弹出层 -->

    <!-- 修改昵称的弹出层 -->
    <van-popup
      class="edit-name-popup"
      v-model="showUpdateName"
      position="bottom"
      ><UpdataName
        v-if="showUpdateName"
        @close="showUpdateName = false"
        v-model="user.name"
      />
    </van-popup>
    <!-- /修改昵称的弹出层 -->

    <!-- 修改性别的弹出层 -->
    <van-popup v-model="showUpdateGender" position="bottom">
      <UpdateGender
        v-if="showUpdateGender"
        @close="showUpdateGender = false"
        v-model="user.gender"
      />
    </van-popup>
    <!-- /修改性别的弹出层 -->

    <!-- 修改生日的弹出层 -->
    <van-popup v-model="showUpdateBirthday" position="bottom">
      <UpdateBirthday
        v-if="showUpdateBirthday"
        v-model="user.birthday"
        @close="showUpdateBirthday = false"
      />
    </van-popup>
    <!-- /修改生日的弹出层 -->
  </div>
</template>

<script>
import { getUserProfile } from "@/api/user";
import UpdatePhoto from "./components/update-photo.vue";
import UpdataName from "./components/updata-name";
import UpdateGender from "./components/update-gender";
import UpdateBirthday from "./components/update-birthday";

export default {
  name: "UserProfile",
  components: { UpdatePhoto, UpdataName, UpdateGender, UpdateBirthday },
  data() {
    return {
      user: {}, // 用户信息
      file: null, // 修改头像的预览图片文件对象
      showUpdatePhoto: false, // 是否显示修改头像
      showUpdateName: false, // 是否显示修改昵称
      showUpdateGender: false, // 是否显示修改性别
      showUpdateBirthday: false, // 是否显示修改生日
    };
  },
  methods: {
    // 请求用户信息
    async loadUserProfile() {
      const { data } = await getUserProfile();
      this.user = data.data;
    },
    // 更换头像
    onFileChange() {
      const file = this.$refs.file.files[0];
      this.file = file;
      this.showUpdatePhoto = true;

      this.$refs.file.value = "";
    },
    updatePhotoSuccess(image) {
      window.URL.revokeObjectURL(this.user.photo);
      this.user.photo = image;
    },
  },
  created() {
    this.loadUserProfile();
  },
};
</script>

<style scoped lang="less">
.photo {
  height: 30px;
  width: 30px;
}

.update-photo-popup {
  height: 100%;
  background-color: #000;
}

.edit-name-popup {
  height: 97%;
}
</style>
